<template>
<el-container class="homeContainer">
    <el-header><div class="headerAll"><div><h2 style="color:white;">后台管理系统</h2></div>
      <el-button @click=exit>退出</el-button></div>
    </el-header>
    <el-container>
    <el-aside width="200px">
    <el-menu default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#4186c9" router unique-opened>
      <el-submenu :index="item.id+''" v-for="item in navData" :key="item.id">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
          <el-menu-item :index="'/'+citem.path" v-for="citem in item.children" :key="citem.id">
          <i class="el-icon-menu"></i>
          {{citem.name}}
          </el-menu-item>
      </el-submenu>
    </el-menu>
    </el-aside>
    <el-main>
    <router-view></router-view>
    </el-main>
    </el-container>
</el-container>
</template>

<script>

export default{
    name:'home',
          data() {
        return {
          navData:[{
            id:1,
            name:'用户管理',
            path:null,
            icon:'el-icon-user',
            children:[{
              id:11,
              name:'用户列表',
              path:'userList',
              children:[]
            }]
          },
          {
            id:2,
            name:'权限管理',
            path:null,
            icon:'el-icon-star-on',
            children:[
              {
                id:21,
                name:'角色列表',
                path:'jiaoseList',
                children:[]
              },
              {
                id:22,
                name:'权限列表',
                path:'quanxianList',
                children:[]
              }
            ]
          },
          {
            id:3,
            name:'商品管理',
            path:null,
            icon:'el-icon-goods',
            children:[
              {
                id:31,
                name:'商品列表',
                path:'goodsList',
                children:[]
              },
              {
                id:32,
                name:'分类参数',
                path:'fenleicanshu',
                children:[]
              },
              {
                id:33,
                name:'商品分类',
                path:'goodsType',
                children:[]
              }
            ]
          },
          {
            id:4,
            name:'订单管理',
            path:null,
            icon:'el-icon-s-order',
            children:[
              {
                id:41,
                name:'订单列表',
                path:'orderList',
                children:[]
              },
            ]
          },
          {
            id:5,
            name:'数据分析',
            path:null,
            icon:'el-icon-s-data',
            children:[
              {
                id:21,
                name:'数据列表',
                path:null,
                children:[]
              },
              {
                id:22,
                name:'权限列表',
                path:null,
                children:[]
              }
            ]
          }]
        }
          },
        methods:{
          exit(){
            sessionStorage.removeItem('token')
            this.$router.push('/')
          }
        }
}
</script>

<style>
.homeContainer{
  height:100%;
}
.el-breadcrumb{
    margin-bottom:15px;
}
.el-header{
  background:#373d41;
}
.headerAll{
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:center;
}
.el-aside{
  background:#333744;
}
.el-main{
  background:#EAEDF1;
}
.el-menu{
  border-right:none;
}
</style>